<template>
    <el-container class="flex-container">
        <el-header>
            <Header/>
        </el-header>
        <el-main>
            <router-view v-slot="{ Component }">
                <transition name="fade">
                    <keep-alive :max="10">
                        <component :is="Component"></component>
                    </keep-alive>
                </transition>
            </router-view>
        </el-main>
        <el-footer>
            <Footer/>
        </el-footer>
    </el-container>
</template>
<script setup>
    import Header from '~/layouts/components/Header.vue';
    import Footer from '~/layouts/components/Footer.vue';
</script>
<style>
    .flex-container {
        display: flex;
        flex-direction: column;
        min-height: 100vh; /* 设置最小高度为视口高度 */
    }

    .el-main {
        --el-main-padding: 0px;
        flex: 1; /* 让主体内容占据剩余空间 */
    }

    .el-header {
        height: 90px;
    }

    .el-footer {
        --el-footer-padding: 0;
        --el-footer-height: -60px;
    }

    .fade-enter-from {
        opacity: 0;
    }

    .fade-enter-to {
        opacity: 1;
    }

    .fade-leave-from {
        opacity: 1;
    }

    .fade-leave-to {
        opacity: 0;
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: all 0.3s;
    }

    .fade-enter-active {
        transition-delay: 0.3s;
    }
</style>
